never forget

top partners | myspace layouts | Chipmunk Scripts | Pretty Profiles | Cool Layouts | myspace layouts

myspaceprodesigns.com

div overlay tutorial

  • bookmark us
  • add me on myspace
  • add me on xuqa
  • add me on yfly

menu

Your Ad Here

friends

Your Ad Here

layouts

Acura Div Layout by Uday

Acura Div Layout

author: Uday

Your Ad Here

new stuff

hot stuff

sponsors

Your Ad Here
pimper.orgrevolutionmyspace.compyzam.combigoo.ws

your first layer

•  Introduction  •  Preparation  •  Hide Everything  •  Your First Layer  •  Add Picture  •  Add Contact Links  •  Understanding Overflow  •  Background Images  •  Z-Index  •  Div Overlay Generator  •

In this step, we will create our first layer.

OK, so we now need to define some colors and build our first layer.  If you remember back to where we talked about our selectors, you'll recall that body{} changed the gray area and table tr td {} changed the colors of everything in the middle.  In addition, you now know how to create a layer.

So let's make our body black and the center section black.  This is what we will add to our style sheet:

body {
background-color:black;
}
table tr td {
background-color:black;
}

In addition, we want to define our first layer.  We do this to cover up the rest of the stuff that's still there.  Let's make one that 800px X 600px, we'll make it blue, and we'll put a 3px grooved white border around it and we'll call this layer "profile".  In addition, we are going to add some text to this layer. We will define the color, and font-size, the alignment of this text and, since we don't want our text to touch our border, we'll add some padding to give it a bit of distance.  In addition, lets make this text bolded.

Notice that we are also telling our browser that this layer will start 155px from the top of the page and the left edge is 400px from the left of center.  We are giving it a z-index of 1 since this will be our bottom layer.

We don't want to go any wider than 800px because some users are still at 800px X 600px resolution, and we don't want them to have to scroll sideways to see everything.  Let's add this to our style sheet:

.profile {
background-color:blue;
border: 6px groove white;
font-size:22pt;
font-weight: bold;
color: white;
text-align:center;
padding: 20px;
position:absolute;
left:50%;
margin-left:-400px;
top:155px;
height:600px;
width:800px;
z-index:1;
}

Finally, we will want to type in what's in this layer.  I usually do this part in the "I'd Like to Meet" section just to keep everything neatly seperated out.  Just remember that, by reading aRiel's tutorial on hiding friends and comments, we want to keep the codes for hiding friends and comments at the end of "I'd Like to Meet" so we will put this before that code:

<div class="profile">Uday's Div Tutorial</div>

Our profile should now look like this:

Step 3

If that's not what you're seeing, make sure all of the coding is correct! This is the toughest section to get right (because this is the first time you're doing it). You can see my comment below left on 2006-12-18 15:50:27 to see what your current code should look like

Now let's add a picture!

Comments

View Comments (1) •  Leave Comment  •  Support Forum